<template>
  <image
    :class="imgLoad ?'':'jh-image'"
    :placeholder="placeholder"
    :src="imgStatus ? src2 : ''"
    :mode="mode"
    :lazy-load="lazyLoad"
    :fade-show="fadeShow"
    :autoBitmapRecycle="autoBitmapRecycle"
    @click="_onClick"
    @error="_onError"
    @load="_onLoad"
  ></image>
</template>

<script>
export default {
  name: 'jhImage',
  data() {
    return {
      webp: this.isWebp,
      imgStatus: true,
      imgLoad: false
    }
  },
  props: {
    width: {
      type: [String, Number]
    },
    height: {
      type: [String, Number]
    },
    placeholder: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'scaleToFill'
    },
    lazyLoad: {
      type: Boolean,
      default: false
    },
    fadeShow: {
      type: Boolean,
      default: false
    },
    autoBitmapRecycle: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    src2 () {
      if (!this.webp && this.src.includes('.webp')) {
        console.log(this.src.replace('.webp','.png'));
        return this.src.replace('.webp','.png')
      } else {
        return this.src
      }
    }
  },
  methods: {
    show () {
      if (this.autoBitmapRecycle) {
        setTimeout(() => {
          this.imgStatus = true
        },0)
      }
    },
    hide () {
      if (this.autoBitmapRecycle && (this.src.includes('.GIF') || this.src.includes('.gif'))) {
        setTimeout(() => {
          this.imgStatus = false
        },0)
      }
    },
    _onClick(e) {
      this.$emit('click', e);
    },
    _onError(e) {
      this.$emit('error', e);
    },
    _onLoad(e) {
      this.imgLoad = true
      this.$emit('load', e);
    }
  }
};
</script>

<style lang="scss" scoped>
  .jh-image{
    background-color: #ccc;
  }
</style>